<template>
    <div>
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="img in imgsList" :key="img.ca_id">
              <router-link :to="'/home/productlist/productinfo/'+img.ca_p_id">
                <img :src="imgurl+img.ca_img" alt="">           
              </router-link>
            </mt-swipe-item>
        </mt-swipe>
        <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            
		            <li class="mui-table-view-cell mui-media mui-col-xs-1 mui-col-sm-4"><router-link to="/home/productlist">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body"><span class="shop">商品购买</span></div></router-link></li>
		         
		            <li class="mui-table-view-cell mui-media mui-col-xs-1 mui-col-sm-4"><router-link to="/video/watchtv">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">视频专区</div></router-link></li>
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		                    <span class="mui-icon mui-icon-more"></span>
		                    <div class="mui-media-body">更多</div></a></li>
                        
		        </ul> 
		    </div>
    </div>
</template>
<script>

export default{
  data(){
    return {
      imgsList:[],
      imgurl:"http://localhost:3000/images/"
    }
  },
  methods:{
    getImgs(){
      this.$ajax({
        url:"/before/imgs",
        method:"get"
      }).then(req=>{
        let res = req.data;
        if(res.status === 1){
          this.imgsList = res.message;
        }
      })
    }
  },
  created(){
    this.getImgs();
  }
}
</script>
<style scoped>
.mint-swipe{
    height: 200px;
}
.mint-swipe-item:nth-child(1){
    background-color: cyan;
}
.mint-swipe-item:nth-child(2){
    background-color: orange;
}
.mint-swipe-item:nth-child(3){
    background-color: pink;
}
img{
  width: 100%;
  height: 100%;
}
</style>
